import React from 'react'
import ReactDOM from 'react-dom'
import { Carousel, Toast } from '@arco-design/mobile-react'
import { MovieWrapper } from './style'
import { images } from '@/config'

export default function SetMovie() {
  function toast(func, options) {
    if (!!window.toastInstance) {
      window.toastInstance.close()
    }
    window.toastInstance = Toast[func](options)
  }
  const items = images.map((item, index) => {
    return (
      <img
        key={index}
        src={item.img}
        alt=""
        srcSet=""
        onClick={() =>
          toast('toast', {
            content: '点了图片' + item.id,
          })
        }
      />
    )
  })
  return (
    <MovieWrapper>
      <Carousel
        initialIndex={1}
        offsetBetween={30}
        spaceBetween={5}
        inactiveScale={0.8}
        autoHeight
        height={202}
        fakeItem={true}>
        {items}
      </Carousel>
    </MovieWrapper>
  )
}
